<template>
  <div style="height: 140%">
    <template v-for="item in data" v-if="item.type === 1">
      <!-- 如果是一级菜单 -->
      <el-menu-item v-if="item.children.length === 0">
        <span>{{item.name}}</span>
      </el-menu-item>
      <!-- 如果是二级菜单 -->
      <el-submenu :index="item.name" v-else>
        <!-- 显示二级菜单名 -->
        <template slot="title">
          <span>{{item.name}}</span>
        </template>
        <!-- 递归显示二级菜单下子菜单 -->
        <template v-for="child in item.children">
          <sidebar-item v-if='child.children.length > 0' :data='[child]'></sidebar-item>
          <el-menu-item :index="child.path" v-else-if="child.display === 1">
            <span>{{child.name}}</span>
          </el-menu-item>
        </template>
      </el-submenu>
    </template>
  </div>
</template>

<script>
  export default {
    name: 'SidebarItem',
    props: {
      data: {
        type: Array
      }
    }
  }
</script>
